import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Table,Pagination ,Input,Button,message,Modal,Row,Col,Select,Popconfirm,InputNumber,Divider,Tabs} from 'antd';
import styles from '../Emergencyplan/index.less';
const {Option ,OptGroup}= Select;
const TabPane = Tabs.TabPane;
import { arrayToTree } from 'utils';
export default connect(({ emplan, loading }) => ({ emplan, loading }))(({emplan, dispatch,loading})=>
    <div className={styles.container}><PagesPOST dispatch={dispatch} {...emplan} loading={loading.global}/></div>);


class PagesPOST extends React.Component {

    constructor (props) {
        super(props);
        this.state = {
            standard: "",
            ActiveKey:'1',
        };
    }
    componentWillMount () {
        this.props.dispatch({
            type:'emplan/goList',payload:{id:localStorage.getItem('id')},
        });
    }
    render (){
        let {getEmergListData,visible,dispatch,record,loading,arrValue,ZRBM,visible_1,visible_2,visible_3,visible_3Data,record_3} = this.props;
        let Data = getEmergListData?getEmergListData[0]:{};
        Data.positionInfo && Data.positionInfo.map((item,index) =>{
            item.index = index +1;
        });
        // Data.positionInfo
        let objOne = {}, arrOne = [],menuTreeOne=[];
        if ( Data.positionInfo && Data.positionInfo.length > 0){
            arrOne = [...Data.positionInfo];
            arrOne.map(item=>{
                if (!objOne[item.position_id]){
                    objOne[item.position_id] = item;
                }
            });
            for(let i in objOne){
                arrOne.push({
                    id:i,
                    position_id:"",
                    content:objOne[i].content,
                    index:objOne[i].num,
                    position:objOne[i].position,
                    organization:objOne[i].organization,
                    roleName:objOne[i].roleName,
                });
            }
            menuTreeOne = arrayToTree(arrOne.filter(_ => _.mpid !== '-1'), 'id', 'position_id');
            menuTreeOne.map((item,index)=>{
                item.index = index+1;
            });
        }
        // console.log(Data.positionInfo,menuTreeOne,objOne,arrOne);
        return <div style={{padding:20}}>
            <div style={{display:"flex",justifyContent:"space-between"}}>
                <div>
                    <div style={{textAlign:'left'}}>预案名称</div>
                    <h2>{Data.pre_name}</h2>
                </div>
                <div>
                    <div style={{textAlign:'right'}}>类型</div>
                    <h2>{Data.pre_type && Data.pre_type == '0'?'综合应急预案':Data.pre_type == '1'?'专项应急预案':'现场处置预案'}</h2>
                </div>

            </div>
            <div className={styles.rowS}>
                <div className={styles.divIt}>
                    <b>版本号：</b><span>{Data.pre_version}</span>
                </div>
                <div className={styles.divIt}>
                    <b>适用范围：</b><span>{Data.pre_scope}</span>
                </div>
                <div className={styles.divIt}>
                    <b>责任部门：</b><span>{Data.department_name}</span>
                </div>
            </div>
            <div className={styles.rowS}>
                <div className={styles.divIt}>
                    <b>签发时间：</b><span>{Data.iss_time}</span>
                </div>
                <div className={styles.divIt}>
                    <b>签发人：</b><span>{Data.user_name}</span>
                </div>
                <div className={styles.divIt}>
                    <b>联系人：</b><span>{Data.contacts}</span>
                </div>
            </div>
            <div style={{borderBottom:'1px solid #f5f5f5',width:"98%"}} className={styles.divIt}>
                <b>公文号：</b><span>{Data.off_no}</span>
            </div>
            <div style={{borderBottom:'1px solid #f5f5f5',width:"98%"}} className={styles.divIt}>
                <b>附件：</b>
                <a href={"http://view.officeapps.live.com/op/view.aspx?src="+Data.doc_url} rel="nofollow"
                    target="view_window">{Data.doc_name}</a>
            </div>
            <Tabs defaultActiveKey="1" onChange={(activeKey)=>{
                this.setState({
                    ActiveKey:activeKey,
                });
            }} tabBarExtraContent={<Button style={{margin:10}} type='primary' onClick={
                ()=>{
                    if(this.state.ActiveKey == 1){
                        dispatch({type:'emplan/save',payload:{visible:true,arrValue:[{}],record:{},record_3:[{}]}});
                    }else if(this.state.ActiveKey == 2){
                        dispatch({type:'emplan/save',payload:{visible_1:true,arrValue:[{}],record:{},record_3:[{}]}});
                    }else {
                        dispatch({type:'emplan/save',payload:{visible_2:true,arrValue:[{}],record:{},record_3:[{}]}});
                    }

                    this.setState({
                        standard:'',
                        index_1:'',
                        index_2:'',
                        centent_1:'',
                        centent_2:'',
                        level_2:'',
                    });
                }
            }>新建项目</Button>}>
                <TabPane tab="应急人员工作任务" key="1">
                    <Table
                        columns={[
                            {
                                title: '序号',
                                dataIndex: 'index',
                                sorter: (a, b) => a.index - b.index,
                            },
                            {
                                title: '责任人',
                                dataIndex: 'position',
                                align:'left',
                            },
                            {
                                title: '归属部门',
                                dataIndex: 'organization',
                                align:'left',
                            },
                            {
                                title: '角色职责',
                                dataIndex: 'roleName',
                                align:'left',
                            },
                            {
                                title: '责任内容',
                                dataIndex: 'content',
                                render:(text,record) =>{
                                    return <a onClick={()=>{
                                        dispatch({type:'emplan/save',payload:{visible_3Data:record.children,visible_3:true}});
                                    }}>{text && text.substring(0,20)}......</a>;
                                },
                                align:'left',
                            },
                            {
                                title: '操作',
                                dataIndex: 'option',
                                render:(text,record) =>
                                    <div>
                                        <Popconfirm title="确定移除?" onCancel={()=>{}} onConfirm={
                                            ()=>dispatch({type:"emplan/listDelete",payload:{id:record.id}})
                                        } okText="是" cancelText="否">
                                            <a style={{color:"red"}}>删除</a>
                                        </Popconfirm>
                                        <Divider type="vertical" />
                                        <a onClick={()=>{
                                            dispatch({type:"emplan/save",payload:{record_3:record.children,visible:true}});
                                        }}>修改</a>
                                    </div>,
                            },
                        ]}
                        size="small"
                        loading={loading.global}
                        rowKey={id=>id.id}
                        childrenColumnName=""
                        dataSource={ menuTreeOne || null}
                        position={{
                            pageSize:10,
                            showSizeChanger: false,
                        }} />
                </TabPane>
                <TabPane tab="预警标准(参数)" key="2">
                    <Table
                        columns={[
                            {
                                title: '序号',
                                dataIndex: 'num',
                                width:80,
                                sorter: (a, b) => a.num - b.num,
                            },
                            {
                                title: '预警标准内容',
                                dataIndex: 'content',
                                align:'left',
                            },
                            {
                                title: '操作',
                                dataIndex: 'option',
                                width:100,
                                render:(text,record) =>
                                    <div>
                                        <Popconfirm title="确定移除?" onCancel={()=>{}} onConfirm={()=> {
                                            dispatch({type:"emplan/deleteEmplanList_Tow",payload:{id:record.id}});
                                        }} okText="是" cancelText="否">
                                            <a style={{color:"red"}}>删除</a>
                                        </Popconfirm>
                                        <Divider type="vertical" />
                                        <a onClick={()=>{
                                            dispatch({type:"emplan/save",payload:{record:record,visible_1:true}});
                                        }}>修改</a>
                                    </div>,
                            },
                        ]}
                        size="small"
                        loading={loading.global}
                        rowKey={id=>id.id}
                        dataSource={ Data.warnInfo || null}
                        position={{
                            pageSize:10,
                            showSizeChanger: false,
                        }} />
                </TabPane>
                <TabPane tab="预警启动标准(参数)" key="3">
                    <Table
                        columns={[
                            {
                                title: '序号',
                                dataIndex: 'num',
                                width:80,
                                sorter: (a, b) => a.num - b.num,
                            },
                            {
                                title: '标准等级',
                                dataIndex: 'grades',
                                width:150,
                                align:'left',
                            },
                            {
                                title: '描述',
                                dataIndex: 'content',
                                align:'left',
                            },
                            {
                                title: '操作',
                                dataIndex: 'option',
                                width:100,
                                render:(text,record) =>
                                    <div>
                                        <Popconfirm title="确定移除?" onCancel={()=>{}} onConfirm={()=> {
                                            dispatch({type:"emplan/deleteEmplanList_Third",payload:{id:record.id}});
                                        }} okText="是" cancelText="否">
                                            <a style={{color:"red"}}>删除</a>
                                        </Popconfirm>
                                        <Divider type="vertical" />
                                        <a onClick={()=>{
                                            dispatch({type:"emplan/save",payload:{record:record,visible_2:true}});
                                        }}>修改</a>
                                    </div>,
                            },
                        ]}
                        size="small"
                        loading={loading.global}
                        rowKey={id=>id.id}
                        dataSource={ Data.warnstartUpInfo || null}
                        position={{
                            pageSize:10,
                            showSizeChanger: false,
                        }} />
                </TabPane>
            </Tabs>
            {/*岗位*/}
            <Modal
                title={record.id?"修改岗位责任信息":'新建岗位责任信息'}
                visible={visible}
                width={800}
                confirmLoading={loading}
                onOk={()=>{
                    let {standard} = this.state;
                    if(standard){
                        arrValue = arrValue.notempty();
                        arrValue.map((item,index)=>{
                            if(!item.num || !item.content){
                                return message.error('请填写完整,或序号小于0!');
                            }
                            if(arrValue.length -1 === index){
                                if(record_3[0].id){
                                    dispatch({type:'emplan/putList',payload:{
                                        position_id:standard,
                                        contentInfo:arrValue,
                                        id:record_3[0].id,
                                        pre_id:localStorage.getItem('id'),
                                    }});
                                }else{
                                    dispatch({type:'emplan/postList',payload:{
                                        position_id:standard,
                                        contentInfo:arrValue,
                                        pre_id:localStorage.getItem('id'),
                                    }});
                                }

                            }
                        });
                    }else{
                        message.error('请填写完整！');
                    }
                }}
                onCancel={()=>dispatch({type:"emplan/save",payload:{visible:false,record:{}}})}
            >
                <Row>
                    <Col span={24}>
                        <span><span style={{color:'red'}}>*</span>岗位选择:</span>
                        <Select disabled={record_3[0].id?true:false} value={this.state.standard || undefined} placeholder="岗位选择" style={{width: 400, marginBottom: 10, marginTop: -4,marginLeft:10}} onChange={(value)=>{
                            this.setState({standard :value});
                        }}>
                            {
                                ZRBM && this.menuTreeOneFunRole(ZRBM)
                            }
                        </Select>
                    </Col>
                    <Col span={24}><span><span style={{color:'red'}}>*</span>责任信息:</span></Col>
                    <Col style={{textAlign:'center',padding:15,background:'#f5f5f5'}} span={4}><span>序号</span></Col>
                    <Col style={{textAlign:'center',padding:15,background:'#f5f5f5'}} span={16}><span>责任内容</span></Col>
                    <Col style={{textAlign:'center',padding:15,background:'#f5f5f5'}} span={4}><span>操作</span></Col>
                    {
                        arrValue && arrValue.map((item,index) => {
                            return <Col span={24} key={index}>
                                <Col style={{textAlign:'center'}} span={4}>
                                    <InputNumber style={{width:50,marginBottom: 10, marginTop: 10}}
                                        onChange={value => {
                                            arrValue[index].num = value;
                                            dispatch({type:'emplan/save',payload:{arrValue:arrValue}});
                                        }}
                                        value={arrValue[index].num}
                                        placeholder="序号"/>
                                </Col>
                                <Col span={16}>
                                    <Input.TextArea style={{marginBottom: 10, marginTop: 10}}
                                        onChange={e =>{
                                            arrValue[index].content = e.target.value;
                                            dispatch({type:'emplan/save',payload:{arrValue:arrValue}});
                                        }}
                                        value={arrValue[index].content}
                                        placeholder="责任内容"/>
                                </Col>
                                <Col style={{textAlign:'center',marginTop: 16}} span={4}>
                                    <a onClick={()=>{
                                        delete arrValue[index];
                                        dispatch({type:'emplan/save',payload:{arrValue:arrValue}});
                                    }}>删除</a>
                                </Col>
                            </Col>;
                        })
                    }

                    <Button disabled={record.id?true:false} onClick={()=>{
                        arrValue.push({});
                        dispatch({type:'emplan/save',payload:{arrValue:arrValue}});
                    }} type="dashed" style={{width:'100%'}}>+添加</Button>
                </Row>
            </Modal>
            {/*预警参数*/}
            <Modal
                title={record.id?"修改预警标准":'新建预警标准'}
                visible={visible_1}
                confirmLoading={loading}
                onOk={()=>{
                    let {index_1,centent_1} = this.state;
                    if(index_1 && centent_1){
                        if(record.id){
                            dispatch({type:"emplan/putEmplanList_Tow",payload:{
                                id:record.id,
                                num:index_1,
                                content:centent_1,
                                pre_id:localStorage.getItem('id'),
                            }});
                        }else {
                            dispatch({type:"emplan/postEmplanList_Tow",payload:{
                                num:index_1,
                                content:centent_1,
                                pre_id:localStorage.getItem('id'),
                            }});
                        }

                    }else{
                        message.error('请填写完整！');
                    }
                }}
                onCancel={()=>dispatch({type:"emplan/save",payload:{visible_1:false,record:{}}})}
            >
                <Row>
                    <Col span={24}>
                        <Col span={5}><span><span style={{color:'red'}}>*</span>序号:</span></Col>
                        <Col span={17}><InputNumber style={{width:200,marginBottom: 10, marginTop: -4}}
                            onChange={value => {
                                this.setState({
                                    index_1:value,
                                });
                            }}
                            value={this.state.index_1}
                            placeholder="序号"/></Col>
                    </Col>
                    <Col span={24}>
                        <Col span={5}><span><span style={{color:'red'}}>*</span>预案标准内容:</span></Col>
                        <Col span={17}><Input.TextArea rows={4} style={{width:300,marginBottom: 10, marginTop: -4}}
                            onChange={e => {
                                this.setState({
                                    centent_1:e.target.value,
                                });
                            }}
                            value={this.state.centent_1}
                            placeholder="预案标准内容"/></Col>
                    </Col>
                </Row>
            </Modal>
            {/*预警标准*/}
            <Modal
                title={record.id?"修改预警启动参数":'新建预警启动参数'}
                visible={visible_2}
                confirmLoading={loading}
                onOk={()=>{
                    let {index_2,centent_2,level_2} = this.state;
                    if(index_2 && centent_2 && level_2){
                        if(record.id){
                            dispatch({type:"emplan/putEmplanList_Third",payload:{
                                id:record.id,
                                num:index_2,
                                content:centent_2,
                                grades:level_2,
                                pre_id:localStorage.getItem('id'),
                            }});
                        }else {
                            dispatch({type:"emplan/postEmplanList_Third",payload:{
                                num:index_2,
                                content:centent_2,
                                grades:level_2,
                                pre_id:localStorage.getItem('id'),
                            }});
                        }
                    }else{
                        message.error('请填写完整！');
                    }
                }}
                onCancel={()=>dispatch({type:"emplan/save",payload:{visible_2:false,record:{}}})}
            >
                <Row>
                    <Col span={24}>
                        <Col span={5}><span><span style={{color:'red'}}>*</span>序号:</span></Col>
                        <Col span={17}><InputNumber style={{width:200,marginBottom: 10, marginTop: -4}}
                            onChange={value => {
                                this.setState({
                                    index_2:value,
                                });
                            }}
                            value={this.state.index_2}
                            placeholder="序号"/></Col>
                    </Col>
                    <Col span={24}>
                        <Col span={5}><span><span style={{color:'red'}}>*</span>标准等级:</span></Col>
                        <Col span={17}><Input style={{width:200,marginBottom: 10, marginTop: -4}}
                            onChange={e => {
                                this.setState({
                                    level_2:e.target.value,
                                });
                            }}
                            value={this.state.level_2}
                            placeholder="标准等级"/></Col>
                    </Col>
                    <Col span={24}>
                        <Col span={5}><span><span style={{color:'red'}}>*</span>预警启动标准:</span></Col>
                        <Col span={17}><Input.TextArea rows={4} style={{width:300,marginBottom: 10, marginTop: -4}}
                            onChange={e => {
                                this.setState({
                                    centent_2:e.target.value,
                                });
                            }}
                            value={this.state.centent_2}
                            placeholder="预案启动标准"/></Col>
                    </Col>
                </Row>
            </Modal>
            <Modal
                title='责任内容详情'
                visible={visible_3}
                width={700}
                style={{ top: 20 }}
                onCancel={()=>dispatch({type:"emplan/save",payload:{visible_3:false,record:{}}})}
                footer={null}
            >
                <Table
                    columns={[
                        {
                            title: '序号',
                            dataIndex: 'num',
                            width:100,
                        },
                        {
                            title: '责任内容',
                            dataIndex: 'content',
                            align:'left',
                        },
                    ]}
                    size="small"
                    rowKey={id=>id.id}
                    dataSource={ visible_3Data || null}
                    position={{
                        pageSize:10,
                        showSizeChanger: false,
                    }} />
            </Modal>
        </div>;
    }
    //角色树
    menuTreeOneFunRole (arr){
        return arr.map(item =>{
            if((item.orgList && item.orgList.length > 0) || (item.roleList && item.roleList.length > 0)){
                return <OptGroup key={item.id} label={item.s_name}>
                    {this.menuTreeOneFunRole(item.roleList)}{this.menuTreeOneFunRole(item.orgList)}
                </OptGroup>;
            }
            return <Option disabled={item.rolr_name?false:true}
                key={item.id} value={item.id}>{item.s_name || item.rolr_name}</Option>;
        });
    }
    componentWillReceiveProps (nextProps) {
        if (nextProps.record.id !== this.props.record.id) {
            //修改第二,三页
            this.setState({
                index_1:nextProps.record.num,
                index_2:nextProps.record.num,
                level_2:nextProps.record.grades,
                centent_1:nextProps.record.content,
                centent_2:nextProps.record.content,
            });
        }
        if (nextProps.record_3[0].id !== this.props.record_3[0].id) {
            //修改第一页
            let position_id = nextProps.record_3 && nextProps.record_3[0].position_id,arrValue = [];
            this.setState({
                standard:position_id,
            });
            nextProps.record_3 && nextProps.record_3.map(item=>{
                arrValue.push({
                    num:item.num,
                    content:item.content,
                    id:item.id,
                });
            });
            // console.log(2222,arrValue,position_id);
            this.props.dispatch({type:'emplan/save',payload:{arrValue:arrValue}});
        }
    }
}